import { Button, Card, Col, Row, Slider } from "antd";
import React, { useEffect, useLayoutEffect } from "react";
import * as echarts from "echarts";
import bar from "./options/bar";
import line from "./options/line";
import pie from "./options/pie";
import { categoryGet, ICateParams } from "@/api/course";

export interface IDashBoardProps {}
const chartStyle = {
  height: "300px",
  // border: "1px solid red",
};

export function DashBoard(props: IDashBoardProps) {
  useEffect(() => {
    // 绘制柱状图
    var barChart = echarts.init(
      document.getElementById("bar") as HTMLDivElement
    );
    barChart.setOption(bar);

    // 绘制折线图
    var lineChart = echarts.init(
      document.getElementById("line") as HTMLDivElement
    );
    lineChart.setOption(line);

    // 绘制饼状图
    var pieChart = echarts.init(
      document.getElementById("pie") as HTMLDivElement
    );
    categoryGet().then((res) => {
      console.log(res);
      let arr = res.data.results.map((item: ICateParams) => {
        return { value: Math.round(Math.random() * 100), name: item.cateName };
      });
      pie.series[0].data = arr;
      pieChart.setOption(pie);
    });
    setTimeout(() => {
      lineChart.resize();
      pieChart.resize();
      barChart.resize();
    }, 100);
    window.addEventListener("resize", () => {
      lineChart.resize();
      pieChart.resize();
      barChart.resize();
    });
  }, []);
  return (
    <div>
      <Row>
        <Col span={24}>
          <Card>
            <div className="chart" style={chartStyle} id="line"></div>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <Card>
            <div className="chart" style={chartStyle} id="bar"></div>
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <div className="chart" style={chartStyle} id="pie"></div>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
